<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-select
            v-model="formInline.operateStatus"
            placeholder="操作状态"
            clearable
            style="width: 192px"
          >
            <el-option
              v-for="item in operateStatusDatas"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.adminId" placeholder="操作者ID" clearable />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.requestType"
            placeholder="请求类型"
            clearable
            style="width: 192px"
          >
            <el-option
              v-for="item in requestTypeDatas"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.requestWay"
            placeholder="请求方式"
            clearable
            style="width: 192px"
          >
            <el-option
              v-for="item in requestWayDatas"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button type="warning" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column property="adminId" label="操作者ID" align="center"></el-table-column>
        <el-table-column property="adminName" label="操作者账号" align="center" />
        <el-table-column property="operateStatus" label="操作状态" align="center">
          <template #default="scope">
            <el-tag :type="operateStatusDatas.find(item => scope.row.operateStatus === item.value).tagType">
              {{ operateStatusDatas.find(item => scope.row.operateStatus === item.value).name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column property="apiName" label="接口描述" show-overflow-tooltip/>
        <el-table-column property="createTime" label="操作时间" show-overflow-tooltip/>
        <el-table-column property="ipAddr" label="主机地址" show-overflow-tooltip/>
        <el-table-column property="methodName" label="方法名称" show-overflow-tooltip/>
        <el-table-column property="requestUrl" label="请求URL" show-overflow-tooltip/>
        <el-table-column property="requestType" label="请求类型" align="center">
          <template #default="scope">
            {{ requestTypeDatas.find(item => scope.row.requestType === item.value).name }}
          </template>
        </el-table-column>
        <el-table-column property="requestWay" label="请求方式" align="center" />
        <el-table-column property="requestParams" label="请求参数" show-overflow-tooltip/>
        <el-table-column property="successJson" label="成功返回参数" show-overflow-tooltip/>
        <el-table-column property="errorJson" label="失败返回参数" show-overflow-tooltip/>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]"
        size="default"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import { ElTable } from 'element-plus'
  import { tableList } from '~/api/acl/operateLog'

  const currentPage = ref(1)
  const pageSize = ref(20)
  const background = ref(false)
  const disabled = ref(false)
  const total = ref(0)

  const operateStatusDatas = [
    {name: '正常', value: 0, tagType: 'success'},
    {name: '失败', value: 1, tagType: 'danger'}
  ]
  const requestTypeDatas = [
    {name: '查询', value: 'query'},
    {name: '添加', value: 'save'},
    {name: '修改', value: 'update'},
    {name: '删除', value: 'remove'}
  ]
  const requestWayDatas = [
    {name: 'GET', value: 'GET'},
    {name: 'POST', value: 'POST'},
    {name: 'PUT', value: 'PUT'},
    {name: 'DELETE', value: 'DELETE'}
  ]

  const formInline = reactive({
    adminId: '',
    operateStatus: '',
    requestType: '',
    requestWay: ''
  })

  const tableData = ref([])

  onQuery()
  // 查询
  function onQuery() {
    tableList(currentPage.value, pageSize.value, formInline).then(res => {
      if(res && res.data.code === 200) {
        const datas = res.data.data.records
        tableData.value = datas
        total.value = res.data.data.total
      }
    })
  }
  // 重置
  function onReset() {
    formInline.adminId = ''
    formInline.operateStatus = ''
    formInline.requestType = ''
    formInline.requestWay = ''
  }

  const multipleSelection = ref([])
  // 多选
  function handleSelectionChange(val) {
    multipleSelection.value = val
  }

  const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
  }
  const handleCurrentChange = (val) => {
    currentPage.value = val
    onQuery()
  }
</script>

<style>
  .el-pagination {
    margin-top: 20px;
    margin-bottom: 20px;
    float: right;
  }

  .btn-list {
    margin-bottom: 20px;
  }
</style>
